<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
	<div class="result">
		<div>父scope：
			<div>Say:{{name}}<br>改变父scope的name:<input type="text" value="" ng-model="name"></div>
		</div>
		<div>隔离scope：
			<div isolated-directive name="{{name}}"></div>
			
		</div>
		<div>隔离scope（不使用{{name}}）:
			<div isolated-directive name="name"></div>
		</div>
	</div>
</div>
<script src="http://cdn.bootcss.com/angular.js/1.6.6/angular.js"></script>
<script type="text/javascript">
	var app = angular.module("myApp", [])
	app.controller('myCtrl', function($scope){
		$scope.name = "hello klren"
	})
	app.directive("isolatedDirective", function(){
		return{
		 	scope:{
				name: "@"
			},
			template:'Say:{{name}} <br>改变隔离scope的name：<input type="button" value="" ng-model="name" class="ng-pristine ng-valid">'
		}
	})
</script>
</body>
</html>